import { getUserApproval, getUserList, getUserLock } from "@/api/user";
import { Button, Space, Switch, Table, Form, Input, DatePicker } from "antd";
import { useCallback, useEffect, useState } from "react"
import { SearchOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";

export default function UserList() {
  const navigate = useNavigate();
  const [userList, setUserList] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [statusLoading, setStatusLoading] = useState<boolean>(false);
  const [total, setTotal] = useState<number>(1);
  const [current, setCurrent] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(1);



  // 搜索用的方法
  const getUserListAsync = useCallback(async (page: number, pageSize: number) => {
    setLoading(true);
    const { keyword, date } = form.getFieldsValue(true);
    const searchOption = {
      keyword,
      createTimeBegin: date && date[0].format("YYYY-MM-DD"),
      createTimeEnd: date && date[1].format("YYYY-MM-DD"),
    };
    const result: any = await getUserList(page, pageSize, searchOption);
    setLoading(false);
    setUserList(result.data.records);
    setTotal(result.data.total);
    setCurrent(result.data.current);
    setPageSize(result.data.size);
    // console.log(result);
    console.log(searchOption);
  }, [])




  /* const getUserListAsync = async (page: number, pageSize: number, data: any = {}) => {
    try {
      setLoading(true);
      const searchOption = data
      console.log(data);

      searchOption.reateTimeBegin = searchOption.reateTimeBegin?.format("YYYY-MM-DD"),
      searchOption.createTimeEnd = searchOption.createTimeEnd?.format("YYYY-MM-DD"),
 
      const result: any = await getUserList(page, pageSize, searchOption);
      setLoading(false);
      setUserList(result.data.records);
      setTotal(result.data.total);
      setCurrent(result.data.current);
      setPageSize(result.data.size);
      // console.log(result);
      console.log(searchOption);
    } catch (err) {
      setLoading(false)
    }
  } */


  useEffect(() => {
    getUserListAsync(1, 5);
  }, [])


  const [form] = Form.useForm();
  const { RangePicker } = DatePicker;
  return (
    <Space direction="vertical" style={{ width: "100%" }}>
      <Form form={form} onFinish={() => {

        getUserListAsync(1, pageSize);
      }} layout="inline">
        <Form.Item name="keyword">
          <Input type="text" placeholder="请输入姓名或手机号" />
        </Form.Item>
        <Form.Item label="创建时间" name="date">
          <RangePicker />
        </Form.Item>
        <Form.Item>
          <Button
            htmlType='submit'
            icon={<SearchOutlined />} type="primary">搜索</Button>
        </Form.Item>
        <Form.Item>
          <Button onClick={() => {
            form.resetFields();
          }}>重置</Button>
        </Form.Item>
      </Form>
      <Table scroll={{ x: "1500px" }} loading={loading} rowKey={"id"} dataSource={userList}
        pagination={{
          current,
          pageSize,
          total,
          onChange: getUserListAsync
        }}
        columns={[
          {
            title: "序号",
            align: "center",
            render(values, rows, index) {
              return (current - 1) * pageSize + index + 1
            }
          },
          {
            title: "姓名",
            align: "center",
            dataIndex: "name"
          },
          {
            title: "昵称",
            align: "center",
            dataIndex: "nicename"
          },
          {
            title: "手机号",
            align: "center",
            dataIndex: "phone"
          },
          {
            title: "是否锁定",
            align: "center",
            render(rows) {
              return (
                <Switch checked={rows.status === 1} onChange={async () => {
                  await getUserLock(rows.id, rows.status);
                  // 
                  setUserList(userList.map((info: any) => {
                    if (info.id === rows.id) info.status = info.status === 1 ? 0 : 1;
                    return info;
                  }))
                }} />
              )
            }
          },
          {
            title: "是否认证",
            align: "center",
            render(rows) {
              return rows.param.authStatusString
            }
          },
          {
            title: "创建时间",
            align: "center",
            dataIndex: "createTime"
          },
          {
            title: "修改时间",
            align: "center",
            dataIndex: "updateTime"
          },
          {
            title: "操作",
            fixed: "right",
            width: "240px",
            align: "center",
            render(rows) {
              return (
                <Space>
                  <Button type='primary' onClick={() => {
                    navigate("/user/show/" + rows.id);
                  }}>查看</Button>
                  <Button disabled={rows.authStatus !== 0} onClick={async () => {
                    await getUserApproval(rows.id, 2);
                    await getUserListAsync(current, pageSize);
                  }} type='primary'>通过</Button>
                  <Button disabled={rows.authStatus !== 0} onClick={async () => {
                    await getUserApproval(rows.id, -1);
                    await getUserListAsync(current, pageSize);
                  }} danger type='primary'>不通过</Button>
                </Space>
              )
            }
          }
        ]}></Table>
    </Space>
  )
}